import React from 'react';
import {
    View,
    Text,
    ScrollView,

    StyleSheet,
} from 'react-native';

const TestScrollView = require('../../components/SDCycleScrollView/TestScrollView');

// 导入常量
const TestScrollViewConsts = require('react-native').UIManager.TestScrollView.Constants;

const bannerImgs = [
    'http://upload-images.jianshu.io/upload_images/2321678-ba5bf97ec3462662.png?imageMogr2/auto-orient/strip%7CimageView2/2',
    'http://upload-images.jianshu.io/upload_images/1487291-2aec9e634117c24b.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/480/q/100',
    'http://f.hiphotos.baidu.com/zhidao/pic/item/e7cd7b899e510fb37a4f2df3db33c895d1430c7b.jpg'
];


class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            bannerNum: 0
        }
    }

    render() {
        return (
            <ScrollView style={{marginTop: 64}}>
                <View style={styles.container}>
                    <TestScrollView
                        style={styles.SDCycleScrollViewStyle} autoScrollTimeInterval={2}
                        imageURLStringsGroup={bannerImgs}
                        pageControlAliment={TestScrollViewConsts.SDCycleScrollViewPageContolAliment.right}
                        onClickBanner={(e) => {
                            console.log('test - ' + e.nativeEvent.value + '\n' + 'target - ' + e.nativeEvent.target);
                            this.setState({bannerNum: e.nativeEvent.value});
                            InteractionManager.runAfterInteractions(() => {
                                PushNative.RNPushVC({
                                    viewController: 'OtherViewController',
                                    moduleId: '20001',
                                    title: '分类列表',
                                })
                            })
                        }}/>
                    <Text style={{fontSize: 15, margin: 10, textAlign: 'center'}}>
                        点击banner -> {this.state.bannerNum}
                    </Text>
                </View>
            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    SDCycleScrollViewStyle: {
        padding: 30,
        borderColor: '#e7e7e7',
        marginTop: 10,
        height: 200,
    },
});

export default Home;